@extends('layout.main')

@section('css')
<link rel="stylesheet" href="/assets/js/plugins/jstree/themes/default/style.min.css" />
<link rel="stylesheet" href="/assets/js/plugins/datatables/media/css/dataTables.bootstrap.min.css" />
<link href="/assets/js/plugins/datatables/extensions/Responsive/css/responsive.dataTables.min.css" rel="stylesheet">
@endsection

@section('content')

<div class="row">
    <div class="col-lg-12">
        <div class="ibox float-e-margins">
            <h5>IOS软件列表</h5>
            <div class="ibox-content m-b-sm border-bottom">
                <div class="row">
                    @can('chkaccess',['App\Http\Controllers\IosController@getAdd'])
                    <button class="btn btn-w-m btn-primary" type="button" onclick="location.href='/ios/add'">添加</button>
                    @endcan
                    @can('chkaccess',['App\Http\Controllers\IosController@postDel'])
                    <button class="btn btn-w-m btn-danger" type="button" onclick="batchdel('/ios/del')">删除</button>
                    @endcan
                    @can('chkaccess',['App\Http\Controllers\IosController@postStatus'])
                    <button class="btn btn-w-m btn-primary" type="button" onclick="batchstatus('/ios/status')">启用</button>
                    @endcan 
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="control-label" for="title">搜索</label>
                            <input type="text" id="title" name="title" value="" placeholder="根据名称搜索" class="form-control">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group" style="position:relative">
                            <label class="control-label" for="type_id">分类</label>
                            <input type="text" data-valid='' id="type_id" name="type_id" value="" placeholder="分类" readonly="readonly" class="form-control">
                            <div id="type" class="form-control" style="display:none;position:absolute;overflow:scroll;z-index:50;height:300px;">
                        </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="control-label" for="ssort">排序类型</label>
                            <select name="ssort" id="ssort" class="form-control">
                                <option value="">全部</option>
                                <option value="sort">推荐</option>
                                <option value="pre">必备</option>
                                <option value="comuse">常用</option>
                                <option value="ishot">热点</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="control-label" for="status_at">状态</label>
                            <select name="status_at" id="status_at" class="form-control">
                                <option value="">全部</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label class="control-label" for="username">管理员</label>
                            <select name="username" id="username" class="form-control">
                                <option value="0">全部</option>
                                @forelse($adminlist as $item)
                                <option value="{{$item->id}}">{{$item->username}}</option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <button class="btn btn-w-m btn-primary pull-right" type="button" onclick="search();">查询</button>
                </div>
            </div>
            <div class="ibox-content">
                <div class="table-responsive">
                    <table id="tblist" class="table table-striped table-bordered table-hover dataTables-example" >
                        <thead>
                            <tr>
                                <th><input id="chkall" type="checkbox"></th>
                                <th>序号</th>
                                <th>标题</th>
                                <th>类型</th>
                                <th>创建时间</th>
                                <th>最后编辑</th>
                                <th>作者</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                    </table>
                    <div style="float:right;">
                    <input style="width:50px;" type="text" id="inputpage"  onkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')">
                    <button style="float:right;" type="button" onclick="jumppage()">跳转</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<!-- Data Tables -->
<script src="/assets/js/plugins/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/assets/js/plugins/datatables/media/js/dataTables.bootstrap.min.js"></script>
<script src="/assets/js/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<!-- <script src="/public/js/plugins/datatables/media/dataTables.tableTools.min.js"></script> -->
<script src="/assets/js/plugins/jstree/jstree.min.js"></script>
<script>
var mytable=$('#tblist').DataTable( {
    "pagingType": "full_numbers",
    "processing": true,
    "serverSide": true,
    "searching": false,
    "ajax": {
        "url": "/ios/datatable",
        "data": function ( d ) {
            d.search_title = $('#title').val();
            d.search_typeid = $('#type_id').attr('data-valid');
            d.search_ssort = $('#ssort').val();
            d.search_statusat = $('#status_at').val();
            d.search_username = $('#username').val();
        }
    },
    "order": [[ 4, "desc" ]],
    "columns": [
        { "name": "chk","orderable": false },
        { "name": "id" },
        { "name": "title" },
        { "name": "typename" },
        { "name": "created_at" },
        { "name": "updated_at" },
        { "name": "admin" },
        { "name": "status_at" },
        { "name": "operate","orderable": false }
    ],
    "language": {
        "url": "/assets/js/plugins/datatables/dtch.json"
    }
});
$(function(){
    $('#type').jstree({ 
        'core' : {
            'themes' : { "icons":false},
            'data' : {!!$jsontv!!}
        }
    }).on("changed.jstree", function (e, data) {
            if(data.selected.length) {
                var nodeobj=data.instance.get_node(data.selected[0]);
                if(nodeobj.children.length>0)
                {
                    alert('请选择叶子节点！');
                }else{
                    $('#type_id').val(nodeobj.text);
                    $('#type_id').attr('data-valid',nodeobj.id);
                    $('#type').css('display','none');
                }
            }
            });

    $ele=$('#type');
    $('#type_id').click(function(){
        var isdisplay=$ele.css('display');
        if(isdisplay=='none'){
            $ele.css('display','block');
        }else{
            $ele.css('display','none');
        }
    })
})
</script>
@endsection